<template>
	<view :style="{ '--colorPrimary': color.primary }">
		<navbar :title="$t('直播')"></navbar>
		<view class="grid">
			<view class="grid-item" v-for="(item,index) in datalist" @click="navPlay(item)">

				<view class="img">

					<image mode="aspectFill" :src="item.feedsImg"></image>
					<view class="tag">{{$t(statuss[item.liveStatus])}}</view>
				</view>
				<view class="info">
					<view class="title"><text>{{item.name}}</text></view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		findByLiveList
	} from '../../api/public';

	export default {
		data() {
			return {
				statuss: {
					101: "直播中",
					102: "未开始",
					103: "已结束",
					104: "禁播",
					105: "暂停",
					106: "异常",
					107: "已过期"
				},
				datalist: []
			}
		},
		onLoad() {
			//	findByLiveList
			var the = this;
			findByLiveList().then(res => {
				the.datalist = res;
			})
		},methods:{
			navPlay(item){
				let roomId =item.roomId // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
				let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
				wx.navigateTo({
				    url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.grid {

		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15rpx;
		padding: 10px;


		.grid-item {
			background-color: #fff;

			border-radius: 5px;

			.tag {
				background-color: #ff000061;
				color: #fff;
				text-align: center;
				margin-top: -24px;
				z-index: 99;
				position: relative;
				font-size: 12px;

			}


			image {
				width: 100%;
				height: 200rpx;
				background-color: #eee;
				border-top-right-radius: 10px;
				border-top-left-radius: 10px;
			}

			.info {
				padding-left: 10px;
				padding-right: 10px;
				padding-bottom: 5px;
			}

			.title {
				font-size: 30rpx;

				display: block;
			}

			.subtitle {
				font-size: 24rpx;
				color: gray;
				margin-top: 4rpx;
				display: block;
			}


		}
	}

	.ellipsis-text {
		width: 500rpx;
		/* 设置一个固定宽度 */

		white-space: nowrap;
		/* 文本不换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 溢出时显示省略号 */
	}
</style>